import React from "react";
import http from "../../api/http";
import { NavBar, Toast } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { Form, Input, Button } from "antd-mobile";
import styles from "./index.module.css"
function Index() {
  const navigate = useNavigate();
  
  const onFinish=async(value)=>{
    const res=await http.post("/api/login",value)
    const {code,data,message}=res.data
    if(code===200){
      localStorage.setItem("token",data.token)
      localStorage.setItem("userInfo",JSON.stringify(data.userInfo))
      Toast.show({
        icon:"success",
        content:message
      })
      navigate("/user")
    }else{
      Toast.show({
        icon:"fail",
        content:message
      })
    }
  }
  return (
    <div>
      <NavBar onBack={() => navigate("/")}></NavBar>
      <h2 className={styles.zhuc}>登录</h2>
      <Form
        layout="horizontal"
        onFinish={onFinish}
        footer={
          <Button block type="submit" color='danger' size="large" className={styles.btn}>
            登录
          </Button>
        }
      >
        <Form.Header></Form.Header>
        <Form.Item
          name="username"
          label=""
          rules={[{ required: true, message: "姓名不能为空" }]}
        >
          <Input  placeholder="请输入你的电子邮箱" />
        </Form.Item>
        <Form.Item
          name="password"
          label=""
          rules={[{ required: true, message: "密码不能为空" }]}
        >
          <Input  placeholder="请输入你的密码" />
        </Form.Item>
        
      </Form>

      <span className={styles.wenbe}>没有账号 ？ <b onClick={()=>navigate("/register")}>立即注册</b></span>
    </div>
  );
}

export default Index;
